<template>
  <el-dialog
    :title="title"
    :width="width"
    v-model="show"
    @close="onClose"
    @opened="onOpen"
    :show-close="showClose"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    append-to-body
  >
  
    <!-- <template v-slot:header="{}" v-if="dig_show">
      <div class="diag_control" :style="{ visibility: dig_show ? 'visible' : 'hidden' }">
        <el-button @click="preview">后退</el-button>
        <el-button @click="forward">前进</el-button>
      </div>
    </template> -->
 
    <slot></slot>
  </el-dialog>
</template>

<script setup>
import { nextTick, defineProps } from "vue";

const props = defineProps({
  modelValue: false,
  title: "",
  width: {
    type: String,
    default: "50%",
  },
  showControl: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["cancel", "update:modelValue"]);

const show = ref(false);
const dig_show= ref(false)

watch(
  () => props.modelValue ,
  () => {
    show.value = props.modelValue;
    
  }
);

watch(
  ()=> props.showControl,
  ()=>{
    dig_show.value= props.showControl;
  }
)

watch(show, () => {
  emits("update:modelValue", show.value);
});

const onClose = () => {
  emits("cancel");
};

const onOpen = () => {
  nextTick(() => {
    const dom = document.querySelector(".el-dialog__wrapper");
    if (dom) {
      dom.scrollTop = 0;
    }

    console.log(props.showControl);
  });
};
</script>

<style lang="scss" scoped>
/* .el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 15px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-sizing: border-box;
	width: 50%;
  z-index: 100;
} */

.diag_control {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
